{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nav&utm_content=innovation' %}

<li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
  <a class="c-menu-title" href="https://future.mozilla.org/?{{ utm_params }}" aria-haspopup="true" aria-controls="c-menu-panel-innovation" data-testid="navigation-link-innovation">{{ ftl('navigation-v2-innovation') }}</a>
  <div class="c-menu-panel" id="c-menu-panel-innovation" data-testid="navigation-menu-innovation">
    <div class="c-menu-panel-container">
      <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-innovation">{{ ftl('navigation-v2-close-innovation-menu') }}</button>
      <div class="c-menu-panel-content">
        <ul class="mzp-l-rows-two">
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="{{ url('firefox.developer.index') }}" data-link-text="Firefox Developer Edition" data-link-position="topnav - innovation">
                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/developer/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-firefox-developer-edition') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-get-the-firefox-browser-built') }}</p>
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="https://developer.mozilla.org/?{{ utm_params }}" data-link-text="MDN Web Docs" data-link-position="topnav - innovation">
                <img loading="lazy" class="c-menu-item-icon" src="{{ static('img/nav/icons/icon-mdn-web-docs.svg') }}" alt="">
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mdn-web-docs') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-check-out-the-home-for-web') }}</p>
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="https://future.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Innovation Projects" data-link-position="topnav - innovation">
                <img loading="lazy" class="c-menu-item-icon" src="{{ static('img/nav/icons/icon-innovation-projects.svg') }}" alt="">
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-innovation-projects') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-discover-ways-to-bring') }}</p>
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="https://commonvoice.mozilla.org/?{{ utm_params }}" data-link-text="Common Voice" data-link-position="topnav - innovation">
                <img loading="lazy" class="c-menu-item-icon" src="{{ static('img/nav/icons/icon-common-voice.svg') }}" alt="">
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-common-voice') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-donate-your-voice-so-the-future') }}</p>
              </a>
            </section>
          </li>
        </ul>
      </div>
    </div><!-- close .c-menu-panel-container -->
  </div><!-- close .c-menu-panel -->
</li><!-- close innovation -->
